import React,{Component} from 'react';
import  MenuConfig  from '../../config/menuConfig';
import { Menu, Icon } from 'antd';
import './index.less'
import {Link} from 'react-router-dom'
const SubMenu = Menu.SubMenu;
export default class NavLeft extends Component{
    constructor(props){
        super(props);
        this.state = {date: new Date()};
    }
    componentDidMount(){
        const menuTreeNode=this.renderMenu(MenuConfig);
        this.setState({
            menuTreeNode
        })
    }
    //菜单渲染
    renderMenu=(data)=>{
        return data.map((item)=>{
            if(item.children){ //查看是否有下一级菜单，如果有就继续遍历
                return (
                        <SubMenu key={item.key} title={<span><Icon type="mail" /><span>{item.title}</span></span>}>
                            {this.renderMenu(item.children)}
                        </SubMenu>
                )
            }else{ //如果没有就直接生成菜单
                return(
                   
                        <Menu.Item key={item.key}> <Link to={'/admin'+item.key} replace>{item.title} </Link></Menu.Item>
                   
                )
            }
        })
    }
    render(){
        return(
            <div>
                <div className="logo">
                    <img src="/assets/logo-ant.svg" alt=""/>
                    <h1>后台管理</h1>
                </div>
                <Menu theme="dark">
                    {this.state.menuTreeNode}
                </Menu>
            </div>
        )
    }

}